import { useState } from 'react';
import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import PageHeader from '../components/PageHeader';
import { useDocumentTitle } from '../hooks/useDocumentTitle';
import { Mail, Phone, MapPin, MessageSquare, Send } from 'lucide-react';
import { MapComponent } from '../components/GoogleMap';
export const ContactPage = () => {
  useDocumentTitle('Contact Us');
  
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const {
      name,
      value
    } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // In a real application, this would send the form data to a server
    alert('Thank you for your message. We will get back to you soon!');
    setFormData({
      name: '',
      email: '',
      subject: '',
      message: ''
    });
  };
  return <div className="flex flex-col min-h-screen w-full bg-white">
      <Header />
      <main className="flex-grow">
        <PageHeader 
          title="Contact Us"
          subtitle="Have questions or feedback? We'd love to hear from you."
          icon={Phone}
        />
        <div className="py-16 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
              <div>
                <h2 className="text-2xl font-bold text-[#0e4c92] flex items-center">
                  <MessageSquare className="mr-2 h-6 w-6 text-[#5cb8b2]" />
                  Send Us a Message
                </h2>
                <p className="mt-4 text-gray-600">
                  Fill out the form below and we'll get back to you as soon as
                  possible.
                </p>
                <form onSubmit={handleSubmit} className="mt-8 space-y-6">
                  <div>
                    <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                      Your Name
                    </label>
                    <input type="text" id="name" name="name" value={formData.name} onChange={handleChange} required className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-[#5cb8b2] focus:border-[#5cb8b2]" />
                  </div>
                  <div>
                    <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                      Email Address
                    </label>
                    <input type="email" id="email" name="email" value={formData.email} onChange={handleChange} required className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-[#5cb8b2] focus:border-[#5cb8b2]" />
                  </div>
                  <div>
                    <label htmlFor="subject" className="block text-sm font-medium text-gray-700">
                      Subject
                    </label>
                    <input type="text" id="subject" name="subject" value={formData.subject} onChange={handleChange} required className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-[#5cb8b2] focus:border-[#5cb8b2]" />
                  </div>
                  <div>
                    <label htmlFor="message" className="block text-sm font-medium text-gray-700">
                      Message
                    </label>
                    <textarea id="message" name="message" rows={5} value={formData.message} onChange={handleChange} required className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-[#5cb8b2] focus:border-[#5cb8b2]" />
                  </div>
                  <div>
                    <button type="submit" className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#0e4c92] hover:bg-[#0a3a70] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#0e4c92]">
                      <Send className="mr-2 h-5 w-5" />
                      Send Message
                    </button>
                  </div>
                </form>
              </div>
              <div>
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6">
                  Contact Information
                </h2>
                <div className="bg-[#f5f7fa] rounded-lg p-6">
                  <div className="flex items-start mb-6">
                    <Mail className="flex-shrink-0 h-6 w-6 text-[#5cb8b2] mt-1" />
                    <div className="ml-3">
                      <h3 className="text-lg font-medium text-[#0e4c92]">
                        Email
                      </h3>
                      <p className="mt-1 text-gray-600">
                        contact@medselecthub.com
                      </p>
                      <p className="mt-1 text-gray-600">
                        support@medselecthub.com
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start mb-6">
                    <Phone className="flex-shrink-0 h-6 w-6 text-[#5cb8b2] mt-1" />
                    <div className="ml-3">
                      <h3 className="text-lg font-medium text-[#0e4c92]">
                        Phone
                      </h3>
                      <p className="mt-1 text-gray-600">+1 (555) 123-4567</p>
                      <p className="mt-1 text-gray-600">
                        Mon-Fri: 9am - 5pm EST
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <MapPin className="flex-shrink-0 h-6 w-6 text-[#5cb8b2] mt-1" />
                    <div className="ml-3">
                      <h3 className="text-lg font-medium text-[#0e4c92]">
                        Office Address
                      </h3>
                      <p className="mt-1 text-gray-600">
                        123 Health Avenue, Suite 101
                        <br />
                        Medical City, MC 12345
                        <br />
                        United States
                      </p>
                    </div>
                  </div>
                </div>
                <div className="mt-8">
                  <h3 className="text-lg font-medium text-[#0e4c92] mb-4">
                    Frequently Asked Questions
                  </h3>
                  <div className="space-y-4">
                    <div className="bg-[#f5f7fa] p-4 rounded-lg">
                      <h4 className="font-medium text-[#0e4c92]">
                        How do you select products to review?
                      </h4>
                      <p className="mt-2 text-gray-600 text-sm">
                        We research market trends, consumer interests, and
                        medical needs to identify products that will benefit our
                        audience.
                      </p>
                    </div>
                    <div className="bg-[#f5f7fa] p-4 rounded-lg">
                      <h4 className="font-medium text-[#0e4c92]">
                        Can I suggest a product for review?
                      </h4>
                      <p className="mt-2 text-gray-600 text-sm">
                        Absolutely! We welcome product suggestions. Please use
                        our contact form to let us know what you'd like us to
                        review.
                      </p>
                    </div>
                    <div className="bg-[#f5f7fa] p-4 rounded-lg">
                      <h4 className="font-medium text-[#0e4c92]">
                        Do you accept guest articles?
                      </h4>
                      <p className="mt-2 text-gray-600 text-sm">
                        We occasionally accept guest contributions from
                        healthcare professionals. Please contact us with your
                        credentials and proposed topic.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            {/* Google Map */}
            <div className="mt-16">
              <h2 className="text-2xl font-bold text-[#0e4c92] mb-6">
                Find Us
              </h2>
              <MapComponent />
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>;
};